import { useMemo } from "react";
import { useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
export interface AccessProps {
  auth: string; // 匹配的权限字符串
  fallback?: React.ReactNode; // 无权限时的显示，默认无权限不显示任何内容
}

const AuthButton: React.FC<AccessProps> = (props) => {
  const {
    auth,
    loading = false,
    fallback = null,
    spinProps = {},
    children,
  } = props;

  const location = useLocation();
  const { pathname } = location || {};

  const mxcAuthList = useSelector((state: any) => state.global.authList);
  const accessible = useMemo(() => {
    return mxcAuthList.includes(`${pathname}/${auth}`);
  }, [location, auth, mxcAuthList]);

  return <div>{accessible ? children : fallback}</div>;
};

export default AuthButton;
